<template>
  <div class="flex-x video_toolbar_box flex-space">
    <div class="flex-x">
      <!-- 音量 -->
      <!-- <Volume  @setVolumeAll="setVolumeAll" @changeSound="changeSound"></Volume> -->

      <div class="hover_icon_border flex-x flex-center">
        <img
          @click="setVolumeAll"
          :src="getIcon"
          style="width: 20px;height: 20px;min-width: 20px;max-height: 20px;"
          alt=""
        />
      </div>
      <!-- 拍照 -->
      <div
        class="hover_icon_border flex-x flex-center"
        style="margin-left: 20px;"
      >
        <span
          @click="handleCamera"
          class="el-icon-camera-solid"
          style="font-size: 20px;"
          :style="{
            color: isClick
          }"
        ></span>
      </div>
    </div>
    <div class="flex-x">
      <div style="color: #fff;font-size: 15;">
        {{ showTime }}
      </div>
      <!-- 播放/关闭全部 -->
      <div class="hover_icon_border flex-x flex-center" style="margin: 0 20px;">
        <span
          @click="playOrStopAll"
          class=""
          :class="!isPlay ? 'el-icon-error' : 'el-icon-caret-right'"
          style="color: #fff;font-size: 22px;"
        ></span>
      </div>
    </div>

    <div class="right flex-x">
      <!-- 全屏 -->
      <div class="hover_icon_border flex-x flex-center">
        <span
          @click="$emit('fullScreen', -1)"
          class="el-icon-full-screen"
          style="color: #fff;font-size: 20px;"
        >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import WindowIcons from "./WindowIcons.vue";
import Volume from "./Volume.vue";
export default {
  components: {
    WindowIcons,
    Volume
  },
  props: {
    showTime: {
      type: [String, Number],
      default: ""
    },
    isPlay: {
      type: Boolean,
      default: false
    },
    currentVideo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    getIcon() {
      if (this.currentVideo) {
        return this.currentVideo.isVolume
          ? require("@/assets/images/shengyin_yes.png")
          : require("@/assets/images/shengyin_f.png");
      } else {
        return require("@/assets/images/shengyin_no.png");
      }
    },
    isClick() {
      return this.currentVideo ? "#fff" : "#8A8A8A";
    }
  },
  data() {
    return {
      volumeNumber: false,
      playAll: true
    };
  },
  methods: {
    nextPage() {
      this.$emit("nextPage");
    },
    previousPage() {
      this.$emit("previousPage");
    },
    setVolumeAll() {
      if (!this.currentVideo) {
        return;
      }
      this.$emit("setVolumeAll", this.currentVideo.isVolume);
    },
    handleCamera() {
      if (!this.currentVideo) {
        return;
      }
      this.$emit("handleCamera");
    },

    // 播放/暂停全部
    playOrStopAll() {
      this.playAll = !this.playAll;
      this.$emit("playOrStopAll", this.isPlay);
    },
    arrangeWindow(num) {
      this.$emit("arrangeWindow", num);
    },
    changeSound(val) {
      if (!this.currentVideo) {
        return;
      }
      this.$emit("changeSound", val);
    }
  }
};
</script>

<style lang="scss">
.hover_icon_border {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  box-sizing: border-box;
  &:hover {
    border-radius: 4px;
    border: 1px solid #848587;
    background-color: #606266;

    // padding: 4px;
  }
}
.video_toolbar_box {
  background-color: #2e3136;
  height: 35px;
  width: calc(100% - 5px);
  padding: 0 10px;
}
</style>
